<template>
	<view class="bks-items">
		<u-navbar :border-bottom="true"  :background="{background:'#fff'}">
			<view class=" u-text-center navbar-content-title" style="width: 100%;">
				<view>{{info.bk_name ? info.bk_name:'-'}}</view>
				<view class="u-font-20" v-if="titleCodeShow">{{info.bk_code ? 'BK'+$u.func.bkCode(info.bk_code):'-'}}</view>
				<view class="u-font-20" :class="[$u.func.bkDsCls(origInfo,'ds')]" v-else>
					<text class="u-m-r-20">{{origInfo.bk_ds ? origInfo.bk_ds/100:'-'}}</text>
					<text>{{origInfo.bk_ds3 ? origInfo.bk_ds3/100+"%":'-'}}</text>
				</view>
			</view>
		</u-navbar>
			<view class="info u-font-26 u-p-lr-10 u-p-tb-20 u-border-bottom u-bg-white">
				<u-row gutter="20" align="top">
					<u-col span="3">
						<view :class="[$u.func.bkDsCls(info,'ds')]">
							<view class="u-font-bold u-font-40 u-flex">
								<text class="u-col-top" >{{info.bk_ds ? info.bk_ds/100:'-'}}</text>
							</view>
							<view class="u-flex u-font-22">
								<view class="u-flex-6">{{info.bk_ds3 ? (info.bk_ds3/100)+'%':'-'}}</view>
								<view class="u-flex-6 u-text-right">{{info.bk_ds2 ? info.bk_ds2/100:'-'}}</view>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">今开</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.bkDsCls(info,'jk')]">{{info.j_k ? info.j_k/100:'-'}}</view>
						</view>
						<view class="u-flex u-m-t-12">
							<text class="u-type-info-dark">总手</text>
							<view class="u-flex-12 u-text-right">{{info.c_l ? $u.func.bondCl(info.c_l):'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">最高</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.bkDsCls(info,'max')]">{{info.max ? info.max/100:'-'}}</view>
						</view>
						<view class="u-flex">
							<text class="u-type-info-dark u-m-t-12">金额</text>
							<view class="u-flex-12 u-text-right">{{info.c_e ? $u.func.bondCe(info.c_e):'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex">
							<text class="u-type-info-dark">最低</text>
							<view class="u-flex-12 u-text-right" :class="[$u.func.bkDsCls(info,'min')]">{{info.min ? info.min/100:'-'}}</view>
						</view>
						
						<view class="u-flex u-m-t-12">
							<text class="u-type-info-dark">昨收</text>
							<view class="u-flex-12 u-text-right">{{info.z_s ? info.z_s/100:'-'}}</view>
						</view>
					</u-col>
				</u-row>
				
				<u-row gutter="20" v-if="!showDate">
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">上涨</text>
							<view class="u-flex-12 u-text-right red">{{info.bond_up != null ? info.bond_up:'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">平盘</text>
							<view class="u-flex-12 u-text-right">{{info.bond_count ? info.bond_count - info.bond_up- info.bond_down:'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="u-flex u-font-22 u-m-t-12">
							<text class="u-type-info-dark">下跌</text>
							<view class="u-flex-12 u-text-right green">{{info.bond_down !=null ? info.bond_down:'-'}}</view>
						</view>
					</u-col>
					<u-col span="3">
						<!-- <view class="u-text-right u-m-t-12"><u-tag text="更多" type="info" size="mini"></u-tag></view> -->
					</u-col>
				</u-row>
				<u-row gutter="20" v-else>
					<u-col span="9">
						<view class="u-flex u-font-22 u-m-t-12 u-type-info-dark">
							{{info.created_at ? info.created_at.split(' ')[0]:'-'}}
						</view>
					</u-col>
					
					<u-col span="3">
						<!-- <view class="u-text-right u-m-t-12"><u-tag text="更多" type="info" size="mini"></u-tag></view> -->
					</u-col>
				</u-row>
			</view>
		<view class="charts-box u-bg-white u-border-bottom">
		  <qiun-data-charts
		    type="candle" 
			canvasId="bks_item_charts" 
			:canvas2d="true" 
		    :chartData="chartData" 
		    background="none" 
		    :ontouch="true" 
			@getIndex="getIndex"
		  />
		</view>
		<view class="u-m-t-20">
			<!-- <view class="u-p-tb-30 u-border-bottom u-m-t-20 u-bg-white"><u-section title="板块可转债" :right="false" color="#2979ff"></u-section></view> -->
			
			<l-bond-list ref="bondList" api="bkBondList" :uri="{'code':code}"></l-bond-list>
		</view>
	</view>
</template>

<script>
	import deepMerge from "@/uview-ui/libs/function/deepMerge";
	export default{
		data(){
			return {
				info:{},
				origInfo:{},
				day:[],
				itemDay:{},
				chartData:{
					// "categories":['2011/01/01'], 
					// "series":[{"name":"22dd","data":[[1,2,3,4]]}
					// 	]
				},
				showDate:false,
				lists:[],
				
				titleCodeShow:true,
				code:0
			}
		},
		onLoad({code}) {
			console.log(code)
			if(!code){
				
				return false;
			}
			
			this.code = code;
			
			this.$u.api.bksItem(code).then(data=>{
				this.day = data.data.day_items;
				let dayLen = this.day.length;
				this.itemDay = this.day[dayLen-1];
				this.origInfo = deepMerge(data.data.item,this.itemDay);
				this.info = deepMerge(data.data.item,this.itemDay);
				
				let categories = [];
				let series = {"name":this.info.bk_name, "data":[]}
				for(let i in this.day){
					let item = this.day[i];
					let date = item['created_at'].split(' ')[0];
					categories.push(date)
					const j_k = item.j_k /100,
						  spj = item.spj /100,
						  min = item.min /100,
						  max = item.max /100
					
					let data = [j_k,spj,min,max];
					
					series.data.push(data);
				}
				
				 this.chartData = {"categories":categories, "series":[series]};
				
				console.log(this.chartData)
			});
			
			
			this.$u.api.indexList().then(data =>{
				console.log(data)
				this.lists = data.data;
				// this.lock = false;
			})
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if(scrollTop > 30 && this.titleCodeShow) this.titleCodeShow = false;
			if(scrollTop < 30 && !this.titleCodeShow) this.titleCodeShow = true;
		},
		onReachBottom() {
			this.$refs.bondList.reachBottom();
		},
		methods:{
			getIndex(e){
				const currentIndex = e.currentIndex.index;
				
				if(currentIndex > 0){
					const item = this.day[currentIndex];
					item['bk_ds'] = item.spj;
					item['bk_ds2'] = item.spj - item.z_s;
					item['bk_ds3'] = parseInt(item['bk_ds2'] / item.z_s * 10000);
					this.info =  deepMerge(this.info, item);
					this.showDate = true;
				}else{
					this.info = this.origInfo;
					this.showDate = false;
				}
				
				console.log(this.origInfo)
			}
		}
	}
</script>

<style scoped>
		
	.bks-items{
		/* background-color: #ffffff; */
	}
	.navbar-content-title {
		position: fixed;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
	}
	.charts-box{
		padding-top:20rpx;
		width: 100%;
		height:500rpx;
	}
	
</style>
